<template>
	
	<view class="content">
		
		<view class="canvas">
			<canvas canvas-id="myimg" style="width: 100%;height: 100%;" @touchstart="Cstart" @touchmove="Cmove" @touchend="Cend"></canvas>
			<slider @change.prevent="sliderChange" class="slider" step="0.01" min="1" max="6" :value="rotate" show-value="true"></slider>
			<view class="button-wrap">
				<button @click="todo">重选</button>
				<button @click="todo1">重置</button>
				<button @click="todo3">预览</button>
				<button style="background-color: lightcoral;color: aliceblue;" @click="todo2">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				//屏幕宽高
				sWidth:'',
				sHeight:'',
				//移动位置
				firstX:0,
				firstY:0,
				endX:0,
				endY:0,
				rotate:1,//fangsuo
				//图片
				img:'',
				imgX:0,
				imgY:0,
				imgWidth:0,
				imgHeight:0,
				//
				tw:0,
				th:0,
				//
				tempimg:'',
				//
				tempctx:'',
			}
		},
		onLoad(option) {		
			uni.getSystemInfo({
				success: (res) => {
					// console.log(res);
					this.sHeight=res.screenHeight;
					this.sWidth=res.screenWidth;					
				}
			})
			if(option.img){
				this.loadimg(option.img)
				// console.log(option.img);
			};
			// const ctx=uni.createCanvasContext('myimg',this);
			// console.log(ctx);
			// console.log(this);	
		},
		onReady() {
			this.draw()
			// this.todo()
			// var ctx=this.tempctx;
			// ctx.setFillStyle('rgba(000,000,000,0.5)')
			// ctx.fillRect(0,0,this.sWidth,this.sHeight)
			// ctx.clearRect(this.sWidth/10,this.sHeight/4,this.sWidth*4/5,this.sWidth*4/5) //裁剪区域
			// ctx.draw()
		},
		methods: {
			loadimg(e){
				this.img=e;
				// console.log(e);
				uni.getImageInfo({
					src:this.img,
					success: (res) => {
						// console.log(res);
						this.imgWidth=res.width;
						this.imgHeight=res.height;
						this.tw=0;
						this.th=0;
						//放大缩小图片
						this.whenter();
						this.draw();
					}
				})
			},
			todo3(){
				uni.canvasToTempFilePath({
					x:(this.sWidth-this.sHeight/3)/2,
					y:this.sHeight/3,
					width:this.sHeight/3,
					height:this.sHeight/3,
					canvasId:"myimg",
					success: (res) => {
						// console.log(res.tempFilePath);
						let timg=[];
						timg.push(res.tempFilePath);
						this.tempimg=timg;
						uni.previewImage({
							urls:timg
						})
					}
				})
			},
			todo2(){
				uni.canvasToTempFilePath({
				  x: (this.sWidth - this.sHeight / 3) / 2,
				  y: this.sHeight / 3,
				  width: this.sHeight / 3,
				  height: this.sHeight / 3,
				  canvasId: "myimg",
				  success: (res) => {
				    console.log(res.tempFilePath); // 裁剪图片
				    // 上传裁剪后的临时文件路径至服务器
				    uni.uploadFile({
				      url: 'https://example.com/upload', // 上传接口地址
				      filePath: res.tempFilePath, // 临时文件路径
				      name: 'file', // 服务器接收文件的字段名
				      formData: {
				        // 可以额外添加其他参数
				        user: 'user123'
				      },
				      success: (uploadRes) => {
				        console.log('上传成功', uploadRes.data);
				        // 这里可以根据服务器返回的数据做进一步处理
				      },
				      fail: (uploadErr) => {
				        console.error('上传失败', uploadErr);
				      }
				    });
				    // 返回上一页传回裁剪图片
				    uni.$emit('updateimg', res.tempFilePath);
				    uni.navigateBack({
				      delta: 1
				    })
				  },
				  fail: (err) => {
				    console.error('Canvas 保存失败', err);
				  }
				});
			},
			todo(){
				uni.chooseImage({
				  success: (res)=>{
					// console.log(res);
				    this.img=res.tempFilePaths[0];
					uni.getImageInfo({
						src:this.img,
						success: (res) => {
							// console.log(res);
							this.imgWidth=res.width;
							this.imgHeight=res.height;
							this.tw=0;
							this.th=0;
							//放大缩小图片
							this.whenter();
							this.draw();
						}
					})
					
				  }
				})
			},
			todo1(){
				this.rotate=1;
				this.whenter();
				this.draw();
				// const ctx=uni.createCanvasContext('myimg',this)
				// uni.chooseImage({
				//   success: (res)=>{
				// 	console.log(res);
				//     ctx.drawImage(res.tempFilePaths[0],this.sWidth/10,this.sHeight/4,100,100)
				    
				// 	ctx.draw()
				//   }
				// })
			},
			whenter(e,i){
				var whl=this.imgWidth/this.imgHeight;
				if(!e){
				if(this.imgHeight>this.imgWidth){
					//宽度合适
					this.imgWidth=this.sHeight/3;
					this.imgHeight=this.imgWidth/whl;
					// this.imgX=this.sWidth/2-this.imgWidth/2;
					// this.imgY=this.sHeight/2-this.imgHeight/2;
				}else{
					//高度合适
					this.imgHeight=this.sHeight/3;
					this.imgWidth=this.imgHeight*whl;
					// this.imgX=this.sWidth/2-this.imgWidth/2;
					// this.imgY=this.sHeight/2-this.imgHeight/2;
				}	
				
				this.imgX=this.sWidth/2-this.imgWidth/2;
				this.imgY=this.sHeight/2-this.imgHeight/2;	
				}else{
					if(e=='w'){
						if(i=='l'){
							this.imgX=this.sWidth/2-this.sHeight/6;
						}else if(i=='r'){
							this.imgX=this.sWidth/2+this.sHeight/6-this.imgWidth;
						}
						// this.imgX=this.sWidth/2-this.imgWidth/2;
					}
					if(e=='h'){
						if(i=='t'){
							this.imgY=this.sHeight/3;
						}else if(i=='b'){
							this.imgY=this.sHeight*2/3-this.imgHeight;
						}
						// this.imgY=this.sHeight/2-this.imgHeight/2;	
					}
				}
			},
			//绘图
			draw(){
				this.tempctx=uni.createCanvasContext('myimg',this);
				var ctx=this.tempctx;		
				// let dx=this.firstX-this.imgWidth/2;
				// let dy=this.firstY-this.imgHeight/2;	
				// ctx.translate(this.sWidth,this.sHeight)
				if(this.img){
				ctx.drawImage(this.img,this.imgX,this.imgY,this.imgWidth,this.imgHeight)
				}
												
							
				//背景灰色//裁剪大小1/3屏幕高度
				ctx.setFillStyle('rgba(000,000,000,0.5)')
				ctx.fillRect(0,0,this.sWidth,this.sHeight/3)
				ctx.fillRect(0,this.sHeight*2/3,this.sWidth,this.sHeight/3)
				ctx.fillRect(0,this.sHeight/3,(this.sWidth-this.sHeight/3)/2,this.sHeight/3)
				ctx.fillRect((this.sWidth-this.sHeight/3)/2+this.sHeight/3,this.sHeight/3,(this.sWidth-this.sHeight/3)/2,this.sHeight/3)
				
				// ctx.setFillStyle('rgba(225,225,225,0.1)')
				// ctx.fillRect(this.sWidth/10,this.sHeight/4,this.sWidth*4/5,this.sWidth*4/5)
				// ctx.clearRect(this.sWidth/10,this.sHeight/4,this.sWidth*4/5,this.sWidth*4/5) //裁剪区域
				
				
				// ctx.clearRect(this.sWidth/10,this.sHeight/4,this.sWidth*4/5,this.sWidth*4/5) //裁剪区域
				
				
				ctx.draw()
			},
			Cstart(e){
				// console.log(e);
				this.firstX=e.touches[0].x;
				this.firstY=e.touches[0].y;	
			},
			Cmove(e){
				this.endX=e.touches[0].x;
				this.endY=e.touches[0].y;
				var detX=this.endX-this.firstX;
				var detY=this.endY-this.firstY;
				// console.log(detX,detY);
				// console.log(this.imgWidth);
				if(this.img){
					this.imgX+=detX/30;					
					this.imgY+=detY/30;
					this.draw()
					
				}			
			},
			Cend(){
				// if(this.imgHeight>this.imgWidth){
					if(this.imgX>(this.sWidth-this.sHeight/3)/2){
						this.whenter('w','l');
						// this.rotate=1;
						this.draw();
					}
					if((this.imgX+this.imgWidth)<(this.sWidth/2+this.sHeight/6)){
						this.whenter('w','r');
						// this.rotate=1;
						this.draw();
					}
					if(this.imgY>this.sHeight/3){
						this.whenter('h','t');
						// this.rotate=1;
						this.draw();
					} 
					if((this.imgY+this.imgHeight<this.sHeight*2/3)){
						this.whenter('h','b');
						// this.rotate=1;
						this.draw();
					}
				// }else{
				// 	if(this.imgX>(this.sWidth-this.sHeight/3)/2 || (this.imgX+this.imgWidth)<(this.sWidth/2+this.sHeight/6)){
				// 		this.whenter('w');
				// 		this.draw();
				// 	}
				// 	if(this.imgY>this.sHeight/3 || (this.imgY+this.imgHeight<this.sHeight*2/3)){
				// 		this.whenter('h');
				// 		this.draw();
				// 	}
				// }
			},
			sliderChange(e){
				// console.log(e);
				this.rotate=e.detail.value;
				if(this.tw==0){
					this.tw=this.imgWidth;
				}
				if(this.th==0){
					this.th=this.imgHeight;
				}
				// console.log(this.tw,this.th);
				this.imgWidth=this.rotate*this.tw;
				this.imgHeight=this.rotate*this.th;
				//位置居中
				this.imgX=this.sWidth/2-this.imgWidth/2;
				this.imgY=this.sHeight/2-this.imgHeight/2;
				this.draw()
			},
		}
	}
</script>

<style>
	page{
		height:100vh;
		width: 100%;
	}
.content{
	position: fixed;
	height: 100vh;
	width: 100%;
	background-color: antiquewhite;
}
.canvas{
	    height: 80%;
	    overflow-y: hidden;
	width: 100%;
}
.slider{
	position: absolute;
	bottom: 140rpx;
	width: 90%;
	    z-index: 99999;
}
.button-wrap{
	width: 100%;
	height: 80rpx;
	display: flex;
	position: absolute;
	bottom: 40rpx;
}
.button-wrap>button{
	line-height: 80rpx;
}
</style>
